<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindSpore RAG 系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">MindSpore 智能文档助手</h1>
            <p class="text-gray-600">基于RAG技术的智能问答系统</p>
        </div>

        <div class="max-w-3xl mx-auto">
            <div class="relative mb-8">
                <input 
                    type="text" 
                    id="searchInput"
                    placeholder="请输入您的问题..."
                    class="w-full px-6 py-4 text-lg rounded-lg border-2 border-gray-200 focus:border-blue-500 focus:outline-none shadow-sm"
                >
                <button 
                    id="searchButton"
                    class="absolute right-2 top-2 bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition-colors"
                >
                    搜索
                </button>
            </div>

            <div id="results" class="hidden">
                <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">最终回答</h2>
                    <p id="gptAnswer" class="text-gray-700"></p>
                </div>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">Q-C 检索结果</h3>
                        <div id="qcResults" class="space-y-4"></div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">ES 检索结果</h3>
                        <div id="esResults" class="space-y-4"></div>
                    </div>
                </div>
            </div>

            <div id="loading" class="hidden text-center py-8">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
